<template>
  <el-dialog :title="title" :visible.sync="isOpen" append-to-body @close="handleClose" width="85%">
    <el-descriptions>
      <el-descriptions-item label="指标名称">
        <b>{{ work.normName }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="指标分值">
        <b>{{ work.planScore }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="责任单位">
        <b> {{ work.deptName }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="指标内容" :span="3">
        <b>{{ work.workContent }}</b>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 上传提示 -->
    <div class="el-upload__tip">
      <p>
        <b style="color: #f56c6c">*完成材料：</b>大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> 格式为
        <b style="color: #f56c6c">{{ fileType.join('/') }}</b
        >的文件（不超过<b style="color: #f56c6c">{{ limit }}</b
        >项）
      </p>
    </div>
    <el-table :data="list" v-loading="loading" border style="width: 100%" :span-method="arraySpanMethod">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分办所" prop="deptName" align="center"> </el-table-column>
      <el-table-column label="完成情况" prop="completionSituation" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.completionSituation || '-' }}</span>
        </template>
      </el-table-column>

      <el-table-column :label="`得分（分值${work.planScore}分）`" prop="firstScore" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.firstScore || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remarks" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.remarks || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成材料" prop="completionMaterialUrls" width="160" align="center">
        <template slot-scope="scope">
          <div>
            <div v-if="scope.row.completionMaterialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.completionMaterialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button type="text" @click="handlePreviewFile(url)" size="mini" class="file-preview-btn">
                  {{ formatFileUrl(url)['name'] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button v-show="operation === 'view'" type="primary" @click="handleClose">关 闭</el-button>
    </div>
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </el-dialog>
</template>

<script>
import { centerWorkCompletion } from '@/api/work/work-completion'
import FilePreview from '@/components/FilePreview'
import FileUpload from '@/components/FileUpload'
import { mixins } from '@/mixins'
export default {
  name: 'work-completion-center_work',
  mixins: [mixins],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    work: {
      type: Object,
      default: () => {}
    },
    operation: {
      type: String,
      default: ''
    }
  },
  components: {
    FilePreview,
    FileUpload
  },
  data() {
    return {
      filePreviewVisible: false,
      previewFile: {},
      centerWorkItem: {
        completionSituation: undefined,
        firstScore: undefined,
        completionMaterialUrls: ''
      },
      centerWorkMapping: {
        completionSituation: '完成情况',
        firstScore: '得分'
      },
      isOpen: false,
      title: '中心工作纪实',
      list: [],
      total: 0,
      loading: false
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        this.isOpen = val
        if (val) {
          this.getList()
        }
      }
    }
  },
  methods: {
    // 表格合并列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 5) {
        return {
          rowspan: this.list.length,
          colspan: 5
        }
      }
    },

    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    getList() {
      this.loading = true
      centerWorkCompletion({ id: this.work.id })
        .then(res => {
          this.loading = false
          this.list = res.data.map(item => {
            if (item.firstScore == '' || item.firstScore == null) {
              item.firstScore = this.work.planScore
            }
            if (item.completionSituation === '' || item.completionSituation === null) {
              item.completionSituation = '完成'
            }
            return item
          })
        })
        .catch(err => {
          this.loading = false
        })
    },
    // 关闭弹框
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss"></style>
